<template>
    <div class="back-main">
        <div class="login-content">
            <div class="login-center">
                <div class="register-box">
                    <div class="back-box">
                        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="手机号:" prop="phone">
                                <el-input v-model="ruleForm.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="code">
                                <el-input v-model="ruleForm.code" class="code-input"></el-input>
                                <div class="getCode" v-show="show" @click="getCode">获取验证码</div>
                                <div class="getCode" v-show="!show">{{countMes}}</div>
                            </el-form-item>
                            <el-form-item label="新密码:" prop="password" >
                                <el-input v-model="ruleForm.password" type="password"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码:" prop="password1">
                                <el-input v-model="ruleForm.password1" type="password" @keyup.enter.native="save"></el-input>
                            </el-form-item>
                        </el-form>
                        <div class="back-button" @click="save">重置密码</div>
                        <!-- <el-checkbox v-model="checked" >同意阅读条款</el-checkbox> -->
                    </div>
                   
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import Cookies from 'js-cookie'
import { Notification } from 'element-ui';
export default {
    scrollToTop: true,
    components: {
        
    },
    data(){
        return{
            menuList:[
                
            ],
            ruleForm:{
                phone:'',
                password:'',
                password1:'',
                code:'',
            },
            rules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
                password1: [
                    { required: true, message: '请确认密码', trigger: 'blur' }
                ],
            },
            user:'',
            password:'',
            password:'',
            show:true,
            count:"",
            countMes:"",
            timer:null,
            checked:false,
            audio:{}
        }
    },
    created(){
        
    },
    mounted(){
        
    },
    beforeDestroy(){
        
    },
    head() {
        return {
          title: '注册',
          
        }
    },
    methods:{
        select(index){
            this.menuList.forEach((item,i)=>{
                if(i==index){
                    item.addClass = "active"
                }
                else{
                    item.addClass = ""
                }
            })
        },
        goB(){
            this.$router.push("/back")
        },
        goL(){
            this.$router.push("/login")
        },
        pre(){
            this.$refs.carousel.prev();
        },
        play(){
            this.audio.pause();
            this.audio.src = this.musicUrl;
            this.audio.play();
        },
        next(){
            this.$refs.carousel.next();
        },
        change(index){
            this.musicUrl = this.imgList[index].audio;
        },
        save(){
            let that = this;
            if(this.ruleForm.phone==""){
                Notification.warning({
                  title:'提示',
                  message:"请输入手机号"
                });
                return;
            }
            else if(!(/^1[3456789]\d{9}$/.test(this.ruleForm.phone))){
                Notification.warning({
                  title:'提示',
                  message:"请输入正确的手机号"
                });
                return;
            }
            else if(this.ruleForm.code==""){
                Notification.warning({
                  title:'提示',
                  message:"请输入验证码"
                });
                return;
            }
            else if(this.ruleForm.password==""){
                Notification.warning({
                  title:'提示',
                  message:"请输入新密码"
                });
                return;
            }
            else if(this.ruleForm.password1==""){
                Notification.warning({
                  title:'提示',
                  message:"请确认密码"
                });
                return;
            }
            else if(this.ruleForm.password1!=this.ruleForm.password){
                Notification.warning({
                  title:'提示',
                  message:"两次密码不一致"
                });
                return;
            }
            // else if(!this.checked){
            //     Notification.warning({
            //       title:'提示',
            //       message:"请勾选条款"
            //     });
            //     return;
            // }
            this.$axios.$get('/f/userResetPassword?mobile='+this.ruleForm.phone+"&mobileCode="+this.ruleForm.code+"&password="+this.ruleForm.password+"&newPassword="+this.ruleForm.password1)
            .then(function (response) {
              Notification.success({
                title:'提示',
                message:"密码已重置"
              })
              that.$router.push("/login");
              
            })
            .catch(function (error) {
              console.log(error);
            })
        },
        getCode(){
          var that = this;
          if(this.ruleForm.phone==""){
            Notification.warning({
              title:'提示',
              message:"请输入手机号"
            })
          }
          else if(!(/^1[3456789]\d{9}$/.test(this.ruleForm.phone))){
            Notification.warning({
              title:'提示',
              message:"请输入正确的手机号"
            })
          }
          else{
            this.$axios.$get('/f/getMobileValidate?mobile='+this.ruleForm.phone+"&templateId=ZHMM_MOULD_ID")
            .then(function (response) {
              Notification.success({
                title:'提示',
                message:"短信已发送"
              })
              let TIME_COUNT = 60;
              that.countMes = "60S"
              if (!that.timer) {
                 console.log(666)
                 that.count = TIME_COUNT;
                 that.show = false;
                 that.timer = setInterval(() => {
                 if (that.count > 0 && that.count <= TIME_COUNT) {
                   that.count--;
                   var countMes = that.count+"S";
                   that.countMes = countMes;
                  } else {
                   that.show = true;
                   clearInterval(that.timer);
                   that.timer = null;
                  }
                 }, 1000)
              }
            })
            .catch(function (error) {
              console.log(error);
            })
          }
          
        },
        getData(id){
            var that = this;
            this.$axios.$get("http://seed.ckwashington.com/c/mini/video/queryEbookDetails?bookId="+id)
            .then(function (response) {
                var data = response.data;
                
                var list = data.educationEbookDetaList;
                
                list.forEach((item)=>{
                    item.audio = "http://seed.ckwashington.com"+item.audio;
                    item.photo = "http://seed.ckwashington.com"+item.photo;
                });
                that.musicUrl = list[0].audio;
                that.title = list[0].title;
                that.imgList = list;
                
                
            })
            .catch(function (error) {
                // handle error
                console.log(error);
            })
        },
    }
}
</script>

<style lang="less">
    .back-main{
        width:100%;
        background: #f4f4f4;
        .el-checkbox{
          width: 50%;
          line-height: 1.5rem;
          margin-top: 20px;
          margin-right: 0;
          float: left;
          text-align:left;
        }
        .login-content{
            width:100%;
            height:600px;
            display:flex;
            align-items:center;
            justify-content:center;
            .login-center{
                width:1250px;
                height:470px;
                // background:#ffffff;
                // box-shadow: 0 6px 15px rgba(167, 167, 167, 0.4);
                display:flex;
                justify-content:center;
                .register-box{
                    width:100%;
                    height:100%;
                    padding:0 80px;
                    box-sizing:border-box;
                }
                .data{
                    line-height:30px;
                    padding-left:50px;
                    margin-top:80px;
                    font-size:16px;
                    color:#444444;
                    float:left;
                    span{
                        color:#6884f3;
                        cursor:pointer;
                    }
                }
                .back-box{
                    width:420px;
                    margin:0 auto;
                    margin-top:50px;
                    
                    .back-button{
                        width:calc(100% - 100px);
                        border-radius:5px;
                        height:50px;
                        margin-left:100px;
                        background:#3a7bf3;
                        color:#ffffff;
                        line-height:50px;
                        font-size:16px;
                        margin-top:40px;
                        text-align:center;
                        cursor:pointer;
                    }
                    .demo-ruleForm{
                        .el-input__inner{
                            border-radius:0;
                        }
                        .code-input{
                            width:220px;
                            float:left;
                        }
                        .getCode{
                            float:right;
                            width:90px;
                            height:40px;
                            border-radius:3px;
                            background:#3a7bf3;
                            color:#ffffff;
                            font-size:14px;
                            float:right;
                            text-align:center;
                            cursor:pointer;
                        }
                    }
                }
            }
        }
    }
</style>
